<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>404 - 页面未找到</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    body {
      background-color: #f8f9fa;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      color: #333;
    }

    /* 404 数字动画 */
    .error-code {
      font-size: 12rem;
      font-weight: 900;
      background: linear-gradient(135deg, #1890ff, #722ed1);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 20px;
      animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
    }

    .error-message {
      text-align: center;
      margin-bottom: 40px;
    }

    .error-message h2 {
      font-size: 2rem;
      margin-bottom: 16px;
      color: #2d3748;
    }

    .error-message p {
      font-size: 1.1rem;
      color: #718096;
      max-width: 600px;
      line-height: 1.6;
    }

    /* 按钮样式 */
    .btn-group {
      display: flex;
      gap: 16px;
      margin-top: 20px;
    }

    .btn {
      padding: 12px 32px;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      border: none;
    }

    .btn-primary {
      background-color: #1890ff;
      color: #fff;
    }

    .btn-primary:hover {
      background-color: #096dd9;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
    }

    .btn-secondary {
      background-color: #fff;
      color: #333;
      border: 1px solid #dee2e6;
    }

    .btn-secondary:hover {
      background-color: #f5f5f5;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    /* 底部文案 */
    .footer {
      position: absolute;
      bottom: 30px;
      color: #a0aec0;
      font-size: 0.9rem;
    }

    /* 响应式适配 */
    @media (max-width: 768px) {
      .error-code {
        font-size: 8rem;
      }

      .error-message h2 {
        font-size: 1.6rem;
      }

      .error-message p {
        font-size: 1rem;
        padding: 0 10px;
      }

      .btn-group {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
      }

      .btn {
        width: 100%;
      }
    }

    @media (max-width: 480px) {
      .error-code {
        font-size: 6rem;
      }
    }
  </style>
</head>
<body>
<!-- 404 核心内容 -->
<div class="error-code">404</div>
<div class="error-message">
  <h2>页面迷路啦～</h2>
  <p>你访问的页面不存在、已被删除，或者 URL 输入错误。<br>请检查地址是否正确，或返回首页重新探索。</p>
</div>

<!-- 功能按钮 -->
<div class="btn-group">
  <button class="btn btn-primary" onclick="window.location.href='/'">返回首页</button>
  <button class="btn btn-secondary" onclick="window.location.reload()">刷新页面</button>
</div>

<!-- 底部版权信息 -->
<div class="footer">
  © 2025 内部沟通系统 | 联系我们：yz_d@qq.com
</div>

<!-- 可选：添加页面访问统计（如百度统计、Google Analytics） -->
<script>
  // 示例：百度统计代码（替换为自己的统计ID）
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?你的统计ID";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>
</body>
</html>
